In UX design, it is essential to make a product convenient, logical, and enjoyable. However, when thinking upside down, I felt that coming up with ridiculous functions for users could be another way to practice pure coding. The topic of this project is ridiculous input and its purpose is a great learning experience that helps to promote critical thinking skills and mental flexibility.
When I searched some examples of ridiculous input, there were not many online except few pages. In other words, most designers don’t actually make the ridiculous input since it is annoying, user-hostile, and inefficient, which gave me an opposite idea to think outside the box.
From the perspective, my plan was to build a functional web written with clean codes, but quite painstakingly funny and time-consuming.
Before diving into the sketching concept, I wanted to add a fun element to my project, which became these kind of concepts. Some of sketches are telling ‘please pull my hair’, ‘please pluck my nose hair’ or enter your phone number with casino game.
For the other ideas, there were 'Lotto game', 'Kiss me', 'Slap me', and 'Hit the nail with this hammer'. These kinds of concepts not only focus on the time-consuming & inefficient but also fun visual elements.
The concept I chose is 'Slap me'. I have slapped my cheek and washed full face with cold water before. To reflect on my situation and relieve stress at the same time, I designed this uncomfortable but fun input, “slap me”.
Since 'slap me' means volume up, I had to draw 'water me' to volume down as well.
These are the buttons and a thermometer to control volume.
Moving on to HTML & CSS, I processed the image with <div> instead of <Img> since the <Img> tag is difficult to handle flexibly. And the reason why the <button> tag was used instead of the <input type="button"> is that the <button> tag is much more free than <input>. I found that it is difficult to put an image on a button if the image is put as the <input> tag. And the <span> tag works for dividing temperature domains.
I built these codes to make it function after learning DOM select, variable, function, Event, and setTimeout on MDN(:
The textContent property was used instead of innerHTML since I have found that the innerHTML could make a security vulnerable, which allows an attacker to inject the HTML code.
After writing the codes, I made a GitHub repository using terminal and updated with git add. Commit & push.
Now, let’s take a look at Slap me web(:
by lody for Ridiculous Input
+ Sketch
+ HTML
+ CSS
+ JavaScript
+ Pure Coding
+ Development
+ Github
: l o d y
